<!--{include common_head}-->
	<div class="preenpage_bg">
	<form id="testForm" name="testForm" method="post" action="/preengage.php">
		<div class="login_inp">
			<ul class="login_ul">
				<li class="login_4 clearfix">
					<label>予約開始時間：</label>
					<input type="text" name="search_date" value="{$year}-{$month}-{$day}" size="20" onfocus="WdatePicker({lang:'jp', dateFmt:'yyyy-MM-dd', minDate:'${date("Y-m-d")}'})" class="Wdate"/>
					<a class="data_icon" href="javascript:;"></a>
					<div class="date fl ml8 clearfix">
						<b id="startHour" contentEditable="true">{$startHour}</b>
						<input type="hidden" name="startHour" value="{$startHour}" size="2"/>
						<em>時</em>
						<b id="startMinute">{$startMinute}</b>
						<input type="hidden" name="startMinute" value="{$startMinute}" size="2"/>
						<em>分 </em>
					</div>
				</li>
				<li class="login_3 clearfix">
					<label>予約店舗：</label>
					<input type="text" value="サービスサービススサービスサービスサービス" readonly="readonly" targetname="shop_id"/>
					<a class="drop_icon" href="javascript:;" targetname="shop_id"></a>
					<ul class="drop_menu_m">
						${Utility::OptionLi($shopList, 'id', $defaultShopId, 'shop_name')}
					</ul>
					<input type="hidden" name="shop_id" value="{$defaultShopId}"/>
				</li>
				<li class="login_3 clearfix">
					<label>予約コース：</label>
					<input type="text" value="サービスサービススサービスサービスサービス" readonly="readonly" targetname="service_id"/>
					<a class="drop_icon" href="javascript:;" targetname="service_id"></a>
					<ul class="drop_menu_m">
						${Utility::OptionLi($serviceList, 'id', $serviceId, 'service_name')}
					</ul>
					<input type="hidden" name="service_id" value="{$serviceId}"/>
				</li>
				
				<li class="login_3 clearfix">
					<label>スタッフ指名：</label>
					<input type="text" value="サービスサービススサービスサービスサービス" readonly="readonly" targetname="staff_id"/>
					<a class="drop_icon" href="javascript:;" targetname="staff_id"></a>
					<ul class="drop_menu_m">
						${Utility::OptionLi($serviceList, 'id', $staffId, 'family_name', 'staff_personal_name')}
					</ul>
					<input type="hidden" name="staff_id" value="{$staffId}"/>
				</li>
				<li class="login_3 errorTips clearfix">
					<label>予約終了時間 ：</label>
					<div class="date fl ml8 clearfix">
						<!-- <input name="endHour" type="text" disabled="disabled" id="end_time" size="2" readonly="readonly"/> -->
						<b id="endHour">0</b>
				        <em>時</em>
				        <b id="endMinute">0</b><!-- <input name="endMinute" type="text" disabled="disabled" id="end_time" size="2" readonly="readonly"/> -->
				        <em>分 </em>
			        </div>
				</li>
			</ul>
		</div>
		<div class="preenbtn clearfix">
			<a class="preen_btn" href="javascript:;" onclick="$('#testForm').submit()"/></a>
			<!--  <a class="preen_btn ml8" href="javascript:;"/></a> -->
		</div>
		<div class="textErrorBox" style="display:none;">
			<div class="textError" id="timeError">
			</div>
			<a href="javascript:;" class="closeBtn"></a>
		</div>
		</form>

	</div>
</div>
</body>
</html>












<!-- End Save for Web Slices -->
<script type="text/javascript">
var serviceCache = [];
var timeError = false;
var staffError = false;
var timeErrorMsg = "";
var staffErrorMsg = "";
$(document).ready(function(){
	$("#startHour").get(0).designMode = 'on';
	$("#startMinute").get(0).designMode = 'on';
	
	$(".closeBtn").bind("click", function(){
		$("#timeError").html("").parent().hide();
	})
	
	$("#testForm").bind("submit", function(){
		staffErrorMsg = "ご指名スタッフはこの時間で予約取れませんの為に、ご予約できませんでした。";
		if(staffError == true){
			if( timeError ){
				$("#timeError").html("<p>ご指名スタッフはこの時間で予約取れませんの為に、ご予約できませんでした。</p><p>" +timeErrorMsg + "</p>").parent().show();
			}else{
				$("#timeError").html("<p>ご指名スタッフはこの時間で予約取れませんの為に、ご予約できませんでした。</p>").parent().show();
			}
			return false;
		}else{
			if( !timeError )
				$("#timeError").html("").parent().hide();
			staffErrorMsg = "";
			//$("#staff_error").html("").hide();
		}
		return !timeError;
		
	})
	
	$("input[name='search_date']").bind("blur", function(){
		calTime();
		getStaffs();
	})
	$("#startHour").bind("keyup", function(){
		//alert("sdfsdf");
		if( $("#startHour").html() == "" || $("#startHour").html().length < 1 || isNaN( $("#startHour").html() )  ){
			//$("#startHour").html( "0" );
			return ;
		}
		$("input[name='startHour']").val($("#startHour").html());
		calTime();
		getStaffs();
	})
	$("#startMinute").bind("keyup", function(){
		//"input[name='startMinute']"
		if( $("#startMinute").html() == "" || $("#startMinute").html().length < 1 || isNaN( $("#startMinute").html() )  ){
			$("#startMinute").html( "0" );
		}
		$("input[name='startMinute']").val( $("#startMinute").html() );
		calTime();
		getStaffs();
	})
	
	$("input[name='shop_id']").prev().find("a").bind("click", function(){
		if( $("input[name='shop_id']").val() < 1 ){
			return ;
		}
		$.get("{$webRoot}/ajax/GetServiceList.php", "shopId=" + $("input[name='shop_id']").val(), function(data){
			var options = '';
			for(var index in data.data){
				if( !index ){
					continue;
				}
				options = options + '<li><a href="javascript:;" value="' + index + '">' + data.data[index].service_name + '</a></li>';
				serviceCache[index] = data.data;
			}
			$("input[name='service_id']").val(0);
			$("input[name='service_id']").prevAll("input").val("選択してください");
			$("input[name='service_id']").prev().html(options);
			
			$("input[name='staff_id']").prev().html('');
			$("input[name='staff_id']").prevAll("input").val("選択してください");
			$("input[name='staff_id']").val(0);
			bindli($("input[name='service_id']").prev());
			
			$("input[name='service_id']").prev().find("a").bind("click", function(){
				calTime();
				getStaffs();
				
			});
		}, "json");
		
	});


	$("input[name='service_id']").prev().find("a").bind("click", function(){
		calTime();
		getStaffs();
		
	});
});

function getStaffs(){
	if( $("input[name='shop_id']").val() < 1 || $("input[name='startHour']") < 1 || $("input[name='service_id']").val() < 1){
		return ;
	}
	var data = "shopId=" + $("input[name='shop_id']").val() + "&serviceId=" +$("input[name='service_id']").val();
	data = data + "&start_date=" + $("input[name='search_date']").val() + " "+$("input[name='startHour']").val()+":"+$("input[name='startMinute']").val();
	
	$.get("{$webRoot}/ajax/GetStaffList.php", data, function(data){
		if( data.error != 0 ){
			$("input[name='staff_id']").prev().html('');
			$("input[name='staff_id']").prevAll("input").val("選択してください");
			$("input[name='staff_id']").val(0);
			staffError = true;
			return ;
		}
		staffError = false;
		//$("#staff_error").hide();
		$("#timeError").parent().hide();
		var options = '';
		for(var index in data.data){
			if( !index ){
				continue;
			}
			options = options + '<li><a href="javascript:;" value="' + index + '">' + data.data[index] + '</a></li>';
			serviceCache[index] = data.data;
		}
		//$("select[name='staff_id']").html(options);
		$("input[name='staff_id']").prevAll("input").val("選択してください");
		$("input[name='staff_id']").prev().html(options);
		$("input[name='staff_id']").val(0);
		bindli($("input[name='staff_id']").prev());
	}, "json");
}

function calTime(){
	if( ($("input[name='startHour']").val() < 0 ) || $("input[name='service_id']").val() < 1 ){
		return ;
	}
	$("input[name='startMinute']").val() < 1 ? $("input[name='startMinute']").val(0) : $("input[name='startMinute']").val();
	var data = "shopId=" + $("input[name='shop_id']").val() + "&serviceId=" +$("input[name='service_id']").val();
	data = data + "&start_date=" + $("input[name='search_date']").val() + " "+$("input[name='startHour']").val()+":"+$("input[name='startMinute']").val();
	$.get("{$webRoot}/ajax/CalcEndTime.php", data, function(data){
		if( data.error == 0 ){
			$("#timeError").parent().hide();
			timeErrorMsg="";
			timeError = false;
			for(var index in data.data){
				$("#endHour").html(data.data['endHour']);
				$("#endMinute").html(data.data['endMinute']);
			}
		}else{
			timeErrorMsg=data.data;
			if(staffError == true){
				$("#timeError").html("<p>" + staffErrorMsg +"</p><p>"+ data.data+"</p>").parent().show();
			}else{
				$("#timeError").html( "<p>"+ data.data+"</p>").parent().show();
			}
			timeError = true;
		}
		
	}, "json");
}

</script>